<template>
	<view>
		<view class="cu-custom" :style="[{height:CustomBar + 'px'}]">
			<view class="cu-bar fixed" :style="[navStyle]" :class="[bgImage!=''?'none-bg text-white bg-img':'',bgClass]">
				<view class="action" @tap="backPage" v-if="isBack">
					<text class="cuIcon-back"></text>
					<slot name="backText"></slot>
				</view>
				<view class="content" :style="[{top:StatusBar + 'px'}]">
					<slot name="content"></slot>
				</view>
				<slot name="right"></slot>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				StatusBar: 0,
				CustomBar: 0
			};
		},
		name: 'cu-navbar',
		created() {
			let that = this;
			uni.getSystemInfo({
				success: function(e) {
					// #ifndef MP
					that.StatusBar = e.statusBarHeight;
					if (e.platform == 'android') {
						that.CustomBar = e.statusBarHeight + 50;
					} else {
						that.CustomBar = e.statusBarHeight + 45;
					};
					// #endif

					// #ifdef MP-WEIXIN
					that.StatusBar = e.statusBarHeight;
					let custom = wx.getMenuButtonBoundingClientRect();
					that.Custom = custom;
					that.CustomBar = custom.bottom + custom.top - e.statusBarHeight;
					// #endif		

					// #ifdef MP-ALIPAY
					that.StatusBar = e.statusBarHeight;
					that.CustomBar = e.statusBarHeight + e.titleBarHeight;
					// #endif					
				}
			})
		},
		props: {
			bgClass: {
				type: String,
				default: 'bg-gradual-pink'
			},
			bgColor: {
				type: String,
				default: ''
			},
			color: {
				type: String,
				default: ''
			},
			bgLinear: {
				type: Array,
				default(){
					return [];
				}
			},
			isBack: {
				type: [Boolean, String],
				default: false
			},
			bgImage: {
				type: String,
				default: ''
			}
		},
		computed: {
			navStyle() {
				var style = {
					height: `${this.CustomBar}px`,
					paddingTop: `${this.StatusBar}px`
				}
				if (this.bgImage) {
					style.backgroundImage = `url(${this.bgImage})`;
				}
				let len = this.bgLinear.length;
				if (!len) {
					if (this.bgColor) {
						style.backgroundColor = this.bgColor;
					}
				} else if (len == 3) {
					style.backgroundImage = `linear-gradient(${this.bgLinear[0]}deg, ${this.bgLinear[1]}, ${this.bgLinear[2]})`;
				}
				if (this.color) {
					style.color = this.color;
				}
				return style;
			}
		},
		methods: {
			backPage() {
				uni.navigateBack({
					delta: 1
				});
			}
		}
	}
</script>

<style lang="scss" scoped>

</style>
